<template>
           <div>
            <el-form
              ref="form"
              :model="sizeForm"
              label-width="auto"
              :label-position="labelPosition"
              :size="size"
            >
              <el-input v-model="input" placeholder="Please input" />
              <el-input v-model="input" placeholder="Please input" />
              <el-input v-model="input" placeholder="Please input" />
            </el-form>
            <el-button type="primary">Primary</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="primary">Primary</el-button>
          </div>
          <div>
            switch parent border: <el-switch v-model="parentBorder" /> 
            switch child border: <el-switch v-model="childBorder" />
  <el-table :data="tableData" :border="parentBorder" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
          <h3>Family</h3>
          <el-table :data="props.row.family" :border="childBorder">
            <el-table-column label="Name" prop="name" />
            <el-table-column label="State" prop="state" />
            <el-table-column label="City" prop="city" />
            <el-table-column label="Address" prop="address" />
            <el-table-column label="Zip" prop="zip" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
  </el-table>
          </div>
</template>

<script setup>

</script>

<style>

</style>